<template>
	<view class="payment-result-wrapper">
		<view class="payment-result-content conteainer-public-style mg24">
			<view class="payment-result-icon flex-c-col">
				<uni-icons v-if="payStatus === 0" class="result-icon" type="clear" size="92rpx" color="#EB5883"></uni-icons>
				<uni-icons v-if="payStatus === 1" class="result-icon" type="checkbox-filled" size="92rpx" color="#EB5883"></uni-icons>
			</view>
			<view class="payment-result b-b-1">
				<view class="payment-success" v-if="payStatus">
					<view class="">
						支付成功
					</view>
					<view class="payment-number">
						￥ {{ money }}
					</view>
				</view>
				<view class="payment-fail" v-if="!payStatus">
					支付失败，已取消支付
				</view>
			</view>
			<view class="payment-info fz26">
				<view class="payment-info-item flex-c">
					<text class="payment-info-item-text color666">支付金额</text>
					<text>{{ money || 0 }}元</text>
				</view>
				<view class="payment-info-item flex-c">
					<text class="payment-info-item-text color666">支付时间</text>
					<text>{{ time || '-' }}</text>
				</view>
				<view class="payment-info-item flex-c">
					<text class="payment-info-item-text color666">订单号</text>
					<text>{{ orderNum || '-' }}</text>
				</view>
			</view>
		</view>
		
		<button class="public-large-btn payment-result-btn" @click="back">返回</button>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

export default defineComponent({
	setup() {
		const state = reactive({
			payStatus: 0,
			money: 0,
			orderNum: 0,
			time: '',
			
		})
		const back = () => uni.navigateBack(); 
		
		onLoad((option: any) => {
			let {payStatus, money, orderNum, time} = option
			
			state.payStatus = +payStatus
			state.money = +money
			state.orderNum = orderNum
			state.time = time
		})
		
		return {
			back,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background: #f8f8fa; padding-top: 50rpx;}
</style>

<style lang="scss" scoped>
.payment-result-wrapper{ 
	.payment-result-icon{
		.result-icon{
			transform: translateY(-70rpx);
		}
	}
	.payment-result{
		transform: translateY(-30rpx);
		padding-bottom: 20rpx;
		.payment-success,.payment-fail{
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC-600;
			font-weight: 700;
			text-align: CENTER;
			color: #333333;
		}
		.payment-number{
			font-size: 60rpx;
		}
		
		
	}
	.payment-info{
		.payment-info-item{
			padding: 16rpx 0;
		}
		.payment-info-item-text{
			width: 110rpx;
			color: #666;
			margin-right: 100rpx;
		}
	}
	.payment-result-btn{
		margin-top: 60rpx;
	}
}
</style>